<template>
  <div>
    <van-cell
      icon="search"
      v-for="item in searchSuggestionsList"
      :key="item"
      @click="searchSuggestClick(item)"
    >
      <div
        slot="title"
        v-html="dealStr(item)"
      ></div>
    </van-cell>
  </div>

</template>

<script>
import { debounce } from 'lodash'
import { getSearchSuggestions } from '@/api/search.js'
export default {
  props: {
    value: {
      type: String,
      required: true

    }
  },
  data () {
    return {
      // 定时器---手动书写定时器的时候使用
      // setId: null
      // 联想搜索数据列表
      searchSuggestionsList: [],
      // 监控 搜索建议组件的存在和消失  true 表示存在
      isShow: true
    }
  },
  methods: {
    // 获取搜索建议数据
    async loadSearchSuggestion () {
      try {
        const { data: res } = await getSearchSuggestions(this.value)
        this.searchSuggestionsList = res.data.options
        this.$toast.success('获取联想建议成功')
      } catch (err) {
        this.$toast('获取联想建议失败')
      }
    },
    // 过滤数据
    dealStr (item) {
      // 正则匹配
      const reg = new RegExp(this.value, 'gi')
      // 返回替换后的标签
      return item.replace(reg, `<span style="color:red;">${this.value}</span>`)
    },
    // 搜索建议点击事件
    searchSuggestClick (item) {
      this.$emit('search', item)
    }
  },
  computed: {},
  watch: {
    value: {
      // value   变化触发 handler
      // debounce 第一个参数是要防抖的函数  第二个是延时的时间
      handler: debounce(function (nval) {
        // 搜索建议组件存在的时候才发送请求
        if (this.isShow) {
          this.loadSearchSuggestion()
        }
      }, 900),
      // 首次也会触发
      immediate: true

    }
  },
  filters: {},
  components: {},
  created () { },
  mounted () { },
  beforeDestroy () {
    // 表示搜索建议组件已经销毁
    this.isShow = false
  }
}
</script>

<style scoped lang='less'>
</style>
